<template>
	<div>
		<div class="tool">
			  <el-button type="primary" plain @click="xie">灵魂书写</el-button>
		</div>
		<div class="box-section">
			<h4 class="title"><a href="#">为了部落</a></h4>
			<p class="time"><span>小记</span><time>2018-3-6 10:39:28</time></p>
			<p class="text">
				<a href="javascript:;">这个是功能很全的html5个人博客模板,焦点图动态展示,增加了站内搜索,微信关注.侧栏使用了颜色标签,使网站显得更加活泼.适合偏向技术型与门户型的站长...</a>
			</p>
			<div class="bottom">
				<span class="fa fa-eye"><em>111</em></span>
				<span class="fa fa-pencil"><em>23</em></span>
				<span class="fa fa-thumbs-o-up"><em>6</em></span>
			</div>
		</div>
		<div class="box-section">
			<h4 class="title"><a href="#">为了部落</a></h4>
			<p class="time"><span>小记</span><time>2018-3-6 10:39:28</time></p>
			<p class="text">
				<a href="javascript:;">这个是功能很全的html5个人博客模板,焦点图动态展示,增加了站内搜索,微信关注.侧栏使用了颜色标签,使网站显得更加活泼.适合偏向技术型与门户型的站长...</a>
			</p>
			<div class="bottom">
				<span class="fa fa-eye"><em>111</em></span>
				<span class="fa fa-pencil"><em>23</em></span>
				<span class="fa fa-thumbs-o-up"><em>6</em></span>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		methods:{
			xie(){
				this.$router.push('write');
			}
		}
	}
</script>

<style>
	.box-section {
		width: 600px;
		padding: 10px;
		border-radius: 6px;
		border: 1px solid #ccc;
		transition: all .3s ease-in;
		margin-bottom: 24px;
	}
	
	.box-section:hover {
		box-shadow: 2px 1px 7px #333333;
	}
	
	.box-section .title {
		font-size: 26px;
		margin-bottom: 10px;
	}
	
	.box-section .title a {
		color: #18222B;
	}
	
	.box-section .time {
		margin-bottom: 10px;
	}
	
	.box-section .time span {
		background-color: #1abc9c;
		padding: 2px 10px;
		border-radius: 6px;
		color: #fff;
	}
	
	.box-section .time time {
		margin-left: 30px;
	}
	
	.box-section .text {
		margin-bottom: 10px;
	}
	
	.box-section .text a {
		color: #18222B;
	}
	
	.box-section .fa {
		margin-right: 20px;
	}
	
	.box-section .fa em {
		margin-left: 6px;
	}
	
	.box-section .fa-thumbs-o-up {
		cursor: pointer;
	}
	.tool {
		margin-bottom: 20px;
	}
</style>